<template>

  <div class="ipt_box_page">

    <div class="flex_box aic" :id="id">
      <div class=""><span>{{ label }}</span><span style="color: red;" v-show="isRequired">*</span></div>
      <div class="item"><input type="text" v-model="formName" placeholder="请输入姓名" @change="updata" /></div>
    </div>

  </div>

</template>

<script setup>

  import { ref, reactive, defineProps, defineEmits } from "vue";

  const props = defineProps({
    id: {
			type: String,
			required: true,
		},
		label: {
			type: String,
			required: true,
		},
		value: {
			type: String,
			default: ''
		},
		isRequired: {
			type: Boolean,
			default: false
		}
  });
  const emit = defineEmits(['update:value']);

  const formName = ref('');

  const updata = () => {
    emit('update:value', formName.value);
  }

</script>

<style lang="less" scoped>

.flex_box {
  display: flex;
  width: 100%;
}

.flex_box .item {
  flex: 1;
}

.aic { align-items: center; }

.ipt_box_page {
  position: relative;
}

</style>